<template>
  <HModal @cancel="close" title="规则组配置" :visible="visible"
          :width="950" :height="630" @ok="handleOK">
    <RowWrapper>
      <RowAttribute :required="true" label="规则组名称" :label-width="labelWidth">
        <a-input v-model="group.checkGroupName" placeholder="请输入规则组名称" />
      </RowAttribute>
      <RowAttribute :required="true" label="权限范围" :label-width="labelWidth">
        <FormCheckActionsSelector v-model="group.actionIds" :form-definition="formDefinition" />
      </RowAttribute>
      <RowAttribute label="是否启用" :label-width="labelWidth">
        <div style="padding-top: 5px">
          <a-checkbox :checked="group.enable"
                      @click.native.stop="() => group.enable = !group.enable" />
        </div>
      </RowAttribute>
      <RowAttribute label="排序" :label-width="labelWidth">
        <a-input-number placeholder="请输入排序" v-model="group.sort" />
      </RowAttribute>
      <RowAttribute :span="24" label="备注" :label-width="labelWidth">
        <a-textarea placeholder="请输入备注" v-model="group.remark" />
      </RowAttribute>
    </RowWrapper>
    <FormCheckRuleConfig :formDefinition="formDefinition" :group="group" />
  </HModal>
</template>
<script>
import HModal from '@comp/hhd/HModal/HModal.vue'
import { createProps, isEmpty } from '@/utils'
import { createFormCheckGroup, createFormDefinition } from '@comp/hhd/design/FormDesigner/types'
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue'
import FormCheckActionsSelector from '@comp/hhd/design/FormDesigner/form/check/FormCheckActionsSelector.vue'
import FormCheckRuleConfig from '@comp/hhd/design/FormDesigner/form/check/FormCheckRuleConfig.vue'
import RowWrapper from '@comp/hhd/layout/RowWrapper.vue'

export default {
  name: 'FormCheckConfigModal',
  components: {
    FormCheckRuleConfig,
    FormCheckActionsSelector,
    HModal,
    RowWrapper,
    RowAttribute
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      labelWidth: '120px',
      visible: false,
      group: createFormCheckGroup()
    }
  },
  methods: {
    setData(group) {
      this.group = JSON.parse(JSON.stringify(group || createFormCheckGroup()))
      this.open()
    },
    handleOK() {
      if (isEmpty(this.group.checkGroupName) || isEmpty(this.group.actionIds)) {
        this.$message.warn('请将必填项填写完整')
        return
      }
      let list = this.group.checkRules || []
      for (let i = 0; i < list.length; i++) {
        let item = list[i]
        if (isEmpty(item.checkFormula) || isEmpty(item.message)) {
          this.$message.warn('请将必填项填写完整')
          return
        }
      }
      this.doHandlerOK()
    },
    doHandlerOK() {
      this.$emit('ok', this.group)
      this.close()
    },
    close() {
      this.visible = false
    },
    open() {
      this.visible = true
    }
  }
}
</script>